<template>
    <massif-layout>
        <template v-slot:left>
            <div class="massifIndex">
                <div class="tobBox">
                    <div class="inputbox" style="margin-right: 10px;">
                        <company-select v-model="searchInfo.companyId" :disabled="userStore.userInfo.roleId!=1" className="small-el-input__inner" popperClass="samll-el-select-dropdown__list" @change="reGetData"/>
                    </div>
                    <div class="inputbox">
                        <farm-select ref="farmRef" v-model="farmId" className="small-el-input__inner" popperClass="samll-el-select-dropdown__list" :optLists="tableData" @change="farmChange"/>
                    </div>
                </div>
                <div class="total">
                    <b>合计：</b>
                    <b>{{ farmcount.farmLandCount }}</b>块
                    <b style="margin-left: 15px;">{{farmcount.farmLandTotal?farmcount.farmLandTotal.toFixed(2):'0'}}</b>亩
                </div>
                <div class="listBox">
                    <el-table class="small-el-table" :row-class-name="setSelectLine" :data="tableData" border style="width: 100%" @row-dblclick="goDetail" @row-click="setMapData">
                        <el-table-column prop="farmNo" label="编号" width="50" show-overflow-tooltip/>
                        <el-table-column prop="farmName" label="农场名称" show-overflow-tooltip/>
                        <el-table-column prop="farmAreaTotal" label="总面积(亩)" width="100"/>
                        <el-table-column prop="companyName" label="所属公司" show-overflow-tooltip/>
                    </el-table>
                </div>
                <div class="bottom-page">
                    <my-pagination @goPage="toPage" :total="total" :page="page" :finish="(page*limit)>=total" :limit="limit"/>
                </div>
            </div>
        </template>
        <tencent-map ref="mapRef" :center="{'lat':34.35,'lng':100.33}" :zoom="4.5"/>
        <map-mode-control v-if="mapRef" :mapObj="mapRef"/>
    </massif-layout>
  </template>
  
  <script setup>
  // 这里的name是为了做页面缓存，其值要跟路由里面的name值一样
  
  import { nextTick, ref, watch, onActivated,reactive,onMounted} from 'vue'
  import{useRouter} from "vue-router"

  import {message} from '@/utils/element'
  import massifLayout from '../components/layout.vue'
  import myPagination from '@/components/custom/myPagination.vue'
  import tencentMap from '@/components/custom/tencentMap.vue'
  import companySelect from '@/components/custom/companySelect.vue'
  import mapModeControl from '@/components/custom/mapModeControl.vue'
  import farmSelect from '@/components/custom/farmSelect.vue'
  import {getFarmList,getFarmCount,getFarmList2} from '@/api/plant'


  import { useUserStore } from '@/pinia/modules/user'

  const router = useRouter()
  const userStore = useUserStore()

  const page = ref(1)
  const limit = ref(20)
  const total = ref(0)
  const tableData = ref([])
  const searchInfo = ref({})
  const mapRef = ref(null)
  const farmId = ref(null)
  const farmRef = ref(null)
  const farmcount = ref({})
  
  onMounted(async ()=>{
    searchInfo.value.companyId = userStore.userInfo.companyId
    get_farm_list()
    get_farm_count() // 头部统计
    await nextTick()
    // 设置标注
   // mapRef.value.setMarker(31.320,110.345,'农场1','423.22亩')
    //mapRef.value.setMarker(29.35,106.23,'农场2','158.68亩') 
    
  })

  const get_farm_count = ()=>{
    getFarmCount({
        companyId:searchInfo.value.companyId,
        farmId:farmId.value
    }).then(res =>{
        farmcount.value = res.data
    })
  }

  const get_farm_list = async ()=>{
    const res = await getFarmList2({
        page:page.value,
        limit:limit.value,
        isEnable:true,
        ...searchInfo.value
    })
    tableData.value = res.data
    total.value = res.total
    set_map_marker()

    // 定位到第一个农场
    if(tableData.value && tableData.value.length>0){
        farmId.value = tableData.value[0].farmId
        farmChange(tableData.value[0])
    }
    
    
    if(userStore.userInfo.roleId!=1){ // 不是平台管理员
        searchInfo.value.companyId = userStore.userInfo.companyId
    } 
  }

  // 设置地图标注
  const set_map_marker = ()=>{
    mapRef.value.clearAllMarker() // 清除所有的标记
    tableData.value.forEach(item =>{
        let className = 'mapMarker'
        if(item.farmId == farmId.value){
            className = 'mapMarker2'
        }
        mapRef.value.setMarker(item.locationLatitude,item.locationLongitude,item.farmName,`${item.farmAreaTotal}亩`,className,(e)=>{
            location.href = `#/full/massif/farm?id=${e.id}`
        },item.farmId)
    })
  }
  // 公司选择变化事件
  const reGetData = ()=>{
    get_farm_list()
    farmId.value = ''
    //farmRef.value.getTableData({...searchInfo.value})
    get_farm_count()
  }

  // 设置选中高亮
  const setSelectLine = ({ row, rowIndex }) =>{
    if(row.farmId == farmId.value){
        return "selectedStyle"
    }else{
        return ''
    }
  }
  // 表格行单击处理事件
  const setMapData = (row)=>{
    farmId.value = row.farmId
    setSelectLine({row})
    set_map_marker()
    get_farm_count()
    mapRef.value.setCenter(row.locationLatitude,row.locationLongitude)
    mapRef.value.setZoom(14)
  }

  // 农场选择变化事件
  const farmChange = (item)=>{
    set_map_marker()
    mapRef.value.setCenter(item.locationLatitude,item.locationLongitude)
    mapRef.value.setZoom(14)
    get_farm_count()
  }
  
  const toPage = (pageNum)=>{
    page.value = pageNum
    get_farm_list()
  }
  const goDetail = (row)=>{
    router.push(`/full/massif/farm?id=${row.farmId}`)
    //router.push({path:'/full/massif/farm',query:{id:row.id},replace:true})
  }
  </script>
  
  <style lang="scss" scoped>
    .massifIndex{
        box-sizing: border-box;
        display: flex;
        flex-flow: column;
        height: 100%;
        padding: 10px 0;
        overflow: hidden;
        .tobBox,.total{
            font-size: 12px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            height: 30px;
            padding: 0 10px;
            flex-shrink: 0;
            .inputbox{
                flex: 1;
            }
        }
        .total{
            margin: 7px 0;
        }
        .listBox{
            box-sizing: border-box;
            //flex: 1;
            max-height: calc(100vh - 205px);
            flex-shrink: 0;
            width: 100%;
            padding: 0 10px;
            overflow: hidden;
            overflow-y: auto;
        }
        .bottom-page{
            box-sizing: border-box;
            flex-shrink: 0;
            height: 30px;
            padding: 0 15px;
        }
    }
  </style>
  